<template>
    <el-dialog :fullscreen="false" v-model="dialogVisible" width="60%" draggable>
        <el-descriptions title="详细信息" :column="2" size="defalut" border>
            <el-descriptions-item v-for="(item, index) in formSchema" :key="index">
                <template #label>
                    <div class="cell-item">
                        {{ item.l }}
                    </div>
                </template>
                <template #default>
                    <div class="content">
                        <div v-if="typeof item.render == 'function'">
                            <span v-html="rowData && item.render(rowData)"></span>
                        </div>
                        <div v-else>
                            {{ rowData && rowData[item.k] }}
                        </div>
                    </div>
                </template>
            </el-descriptions-item>
        </el-descriptions>

    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ITableColumn, } from '#/tablepage'
const props = defineProps({
    formSchema: Array<ITableColumn>
})

const dialogVisible = ref(false)
const rowData = ref(null)
const openDialog = (row: any) => {
    if (row) {
        rowData.value = row
    } else {
        rowData.value = null
    }
    dialogVisible.value = true
}
defineExpose({
    openDialog
})
</script>
<style lang="scss" scoped>
.content{
    width: 300px;
    height: auto;
}
</style>